<!-- txsp/templates/new.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/styles.css">
    <style>
        /* 整体容器样式 */
        .article-container {
            max-width: 850px;
            margin: 0 auto;
            padding: 20px;
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
        }

        /* 标题样式 */
        .article-title {
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            color:rgba(255, 255, 255, 0.882);
        }

        /* 段落样式 */
        .article-paragraph {
            font-size: 16px;
            margin-bottom: 40px;
            color:rgba(255, 255, 255, 0.882);
        }

        /* 图表容器样式 */
        .chart-container {
            margin-bottom: 40px;
        }

        /* 图表标题样式 */
        .chart-title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 10px;
            color:rgba(255, 255, 255, 0.882);
        }

        /* 图表 iframe 样式 */
        .chart-iframe {
            width: 850px;
            height: 500px;
            border: none;
        }

        /* 轮播 */
         .slider-container {
        width: 800px; /* 增加轮播容器的宽度 */
        height: auto; /* 增加轮播容器的高度 */
        overflow: hidden;
        position: relative;
        margin: 20px auto;
        border: 1px solid #ccc; /* 添加边框 */
        border-radius: 10px; /* 添加圆角 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }

        .slider {
        display: flex;
        transition: transform 0.8s ease-in-out; 
        }

        .slider img {
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
            border: none;
            box-sizing: border-box;
            object-fit: cover; 
        }
      
    </style>
</head>

<body>
    <div class="article-container">
         <div class="slider-container">
        <div class="slider" id="slider-new">
            <!-- 设置图片宽度和高度为 100% -->
            <img src="/static/1.jpg" style="width: 100%; height: 100%; object-fit: cover;">
            <img src="/static/2.webp" style="width: 100%; height: 100%; object-fit: cover;">
            <img src="/static/3.webp" style="width: 100%; height: 100%; object-fit: cover;">
            <img src="/static/5.jfif" style="width: 100%; height: 100%; object-fit: cover;">
            <img src="/static/4.jfif" style="width: 100%; height: 100%; object-fit: cover;">
            <img src="/static/6.jfif" style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        </div>
        <p class="article-paragraph">在当今数字化时代，视频平台已成为人们获取娱乐、信息和教育的主要渠道。
            作为中国领先的在线视频平台，腾讯视频每天产生并传播着海量的视频内容，这些内容不仅反映了当代社会的文化脉搏，
            也记录了大众兴趣的变迁轨迹。本次可视化分析作业旨在通过数据科学的手段，展示腾讯视频热门内容。
        </p>


        <div class="chart-container">
            <h3 class="chart-title">折线图 - 近十年年腾讯视频电视剧上线数量</h3>
            <iframe class="chart-iframe" src="/line_chart.html"></iframe>
            <p class="article-paragraph">2015 年 IP 改编热潮、资本涌入，产量达 290 部峰值，却暴露内容等问题。
            2016 年因广电 “限娱令”“题材管控” 与资本退潮，产量腰斩至 184 部。2020 年疫情致拍摄停滞，产能再压。
            2021 - 2024 年行业复苏，2024 年产量 247 部，因适应监管，聚焦现实、主旋律题材，契合导向与需求。</p>
        </div>

        <div class="chart-container">
            <h3 class="chart-title">柱状图 - 各类热门剧年度评分对比</h3>
            <iframe class="chart-iframe" src="/type_rating_bar"></iframe>
            <p class="article-paragraph">强类型如悬疑、科幻，某一年份评分骤升（如 2022 年科幻），
                多因现象级作品（如《三体》）突破创作边界，刷新观众认知，拉高类型口碑；青春题材通过
                叙事升级（从 “纯甜宠” 转向 “成长 + 现实映射”，如职场青春、社会议题融入），持续击中年轻群体与怀旧受众，
                近年口碑再创新高。职场题材聚焦 “职场生存、职业理想、人际博弈”，通过真实职场场景（如互联网、医疗、教育）引发广泛共鸣，
                大众对 “现实映射类作品” 的需求持续释放。综上，科幻类（创新突破）、青春类（情感 + 成长）、现实职场类（贴近生活）
                是近年大众偏好度提升最显著的类型，反映市场对 “现实共鸣”“青春活力”“科幻想象” 的多重需求。</p>
        </div>

        <div class="chart-container">
            <h3 class="chart-title">玫瑰图 - 主演影响力</h3>
            <iframe class="chart-iframe" src="/rose_chart"></iframe>
            <p class="article-paragraph">从图中可以看出，不同主演的评论数存在差异，部分主演凭借其参演的热门剧集获得了较高的评论数，
                反映出这些主演在观众中的关注度和影响力。</p>
        </div>

        <div class="chart-container">
            <h3 class="chart-title">词云图 - 热门电视剧标签词云</h3>
            <iframe class="chart-iframe" src="/wordcloud"></iframe>
            <p class="article-paragraph">“爱情”“都市” 占比突出，反映 现实情感类题材仍是大众基础盘（聚焦都市情感、生活百态），
                “口碑”“高分” 两大标签醒目，折射 行业逻辑转变：从 “流量为王” 转向 “质量为王”，观众更关注作品口碑、评分，
                精品剧更易获得传播势能。</p>
        </div>

        <p class="article-paragraph">通过这些图表，我们可以直观地了解腾讯视频热门电视剧在不同方面的表现，为我们分析电视剧市场提供有力的数据支持。</p>
    </div>


    

</body>

</html>